<template>
	<div class="min-h-screen bg-gradient-to-br from-gray-50 via-blue-50 to-indigo-50">
		<!-- 背景装饰 -->
		<div class="fixed inset-0 overflow-hidden pointer-events-none">
			<div
				class="absolute -top-40 -right-40 w-80 h-80 bg-blue-200 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob">
			</div>
			<div
				class="absolute -bottom-40 -left-40 w-80 h-80 bg-purple-200 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob animation-delay-2000">
			</div>
			<div
				class="absolute top-40 left-40 w-80 h-80 bg-pink-200 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob animation-delay-4000">
			</div>
		</div>

		<!-- 主要内容区域 -->
		<div class="container mx-auto px-12 py-10 pt-32 relative z-10">
			<!-- 顶部：返回与标题 -->
			<div class="flex items-center justify-between mb-10">
				<div class="flex items-center gap-4">
					<el-button type="primary" link @click="goBack" class="text-gray-600 hover:text-gray-800 text-lg">
						<el-icon class="mr-2 text-xl">
							<ArrowLeft />
						</el-icon>
						返回作业列表
					</el-button>
					<h1 class="text-4xl font-bold text-gray-900">作业评价</h1>
				</div>
				<div class="text-lg text-gray-600 font-medium">{{ homework?.title || '' }}</div>
			</div>

			<!-- 主体内容 -->
			<div class="grid grid-cols-1 lg:grid-cols-3 gap-10">
				<!-- 左侧：学生提交信息 -->
				<div class="lg:col-span-1">
					<div class="bg-white rounded-3xl shadow-xl border border-gray-200 p-8 sticky top-32">
						<h3 class="text-2xl font-bold text-gray-900 mb-6">学生提交信息</h3>

						<div class="space-y-6">
							<div class="flex items-center gap-4">
								<div class="w-16 h-16 bg-blue-100 rounded-xl flex items-center justify-center">
									<el-icon class="text-blue-600 text-2xl">
										<User />
									</el-icon>
								</div>
								<div>
									<p class="text-lg text-gray-500 mb-1">学生姓名</p>
									<p class="text-xl font-semibold text-gray-900">{{ submission?.studentName || '张三' }}
									</p>
								</div>
							</div>

							<div class="flex items-center gap-4">
								<div class="w-16 h-16 bg-green-100 rounded-xl flex items-center justify-center">
									<el-icon class="text-green-600 text-2xl">
										<Clock />
									</el-icon>
								</div>
								<div>
									<p class="text-lg text-gray-500 mb-1">提交时间</p>
									<p class="text-xl font-semibold text-gray-900">
										{{ formatDate(submission?.submitDate) }}
									</p>
								</div>
							</div>

							<div class="pt-6 border-t border-gray-200">
								<h4 class="text-xl font-semibold text-gray-700 mb-4">提交附件</h4>
								<div class="space-y-3">
									<div v-for="(file, index) in submission?.attachments" :key="index"
										class="flex items-center justify-between bg-gray-50 p-3 rounded-xl">
										<div class="flex items-center gap-3">
											<el-icon class="text-gray-500">
												<Document />
											</el-icon>
											<span class="text-gray-800">{{ file.name }}</span>
										</div>
										<el-button type="text" size="small" @click="downloadFile(file)"
											class="text-blue-600">
											<el-icon class="mr-1">
												<Download />
											</el-icon>下载
										</el-button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- 右侧：评价区域 -->
				<div class="lg:col-span-2">
					<div class="bg-white rounded-3xl shadow-xl border border-gray-200 p-8">
						<h3 class="text-2xl font-bold text-gray-900 mb-6">提交内容</h3>
						<div class="bg-gray-50 p-6 rounded-2xl mb-8">
							<p class="text-gray-800 leading-relaxed">{{ submission?.content || '该学生未提交任何文字内容' }}</p>
						</div>

						<h3 class="text-2xl font-bold text-gray-900 mb-6">评分与评语</h3>
						<el-form ref="gradeFormRef" :model="gradeForm" :rules="gradeRules" class="space-y-6">
							<el-form-item label="总分" prop="score" label-width="80px">
								<div class="flex items-center gap-3">
									<el-input v-model.number="gradeForm.score" type="number" min="0"
										:max="homework?.totalScore || 100" class="w-32" />
									<span class="text-gray-500">/{{ homework?.totalScore || 100 }}</span>
								</div>
							</el-form-item>

							<el-form-item label="评语" prop="comments" label-width="80px">
								<el-input v-model="gradeForm.comments" type="textarea" :rows="6"
									placeholder="请输入评语..." />
							</el-form-item>

							<div class="flex justify-end gap-4 pt-4">
								<el-button @click="goBack">取消</el-button>
								<el-button type="primary" @click="handleSubmit" :loading="submitting">
									提交评价
								</el-button>
							</div>
						</el-form>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		useRoute,
		useRouter
	} from 'vue-router'
	import {
		ElMessage
	} from 'element-plus'
	import {
		ArrowLeft,
		User,
		Clock,
		Document,
		Download
	} from '@element-plus/icons-vue'

	const route = useRoute()
	const router = useRouter()
	const submitting = ref(false)
	const gradeFormRef = ref(null)

	// 路由参数
	const classId = ref(route.params.classId)
	const homeworkId = ref(route.params.homeworkId)
	const submissionId = ref(route.params.submissionId)

	// 模拟数据 - 实际项目中应从API获取
	const homework = ref({
		id: 1,
		title: '算法基础练习',
		totalScore: 100
	})

	const submission = ref({
		id: 1,
		studentName: '张三',
		submitDate: '2024-01-20',
		content: '已完成三种排序算法的实现，代码结构清晰，注释完整。',
		attachments: [{
				name: 'sorting_algorithms.py',
				size: '2.3KB'
			},
			{
				name: 'test_results.pdf',
				size: '156KB'
			}
		]
	})

	// 评价表单（已移除详细评分相关字段）
	const gradeForm = ref({
		score: null,
		comments: ''
	})

	// 表单验证规则（已移除详细评分相关规则）
	const gradeRules = {
		score: [{
				required: true,
				message: '请输入总分',
				trigger: 'blur'
			},
			{
				type: 'number',
				min: 0,
				message: '分数不能为负数',
				trigger: 'blur'
			}
		],
		comments: [{
			required: true,
			message: '请输入评语',
			trigger: 'blur'
		}]
	}

	// 方法（已移除详细评分相关方法）
	const goBack = () => router.back()

	const formatDate = (dateStr) => {
		if (!dateStr) return '-'
		return new Date(dateStr).toLocaleDateString('zh-CN')
	}

	const downloadFile = (file) => {
		ElMessage.info(`下载文件: ${file.name}，由后端实现`)
	}

	const handleSubmit = async () => {
		try {
			await gradeFormRef.value.validate()
			submitting.value = true

			// 模拟提交过程
			await new Promise(resolve => setTimeout(resolve, 1000))

			ElMessage.success('评价提交成功！')
			router.push(`/class/${classId.value}/homework`)
		} catch (error) {
			console.error('提交失败:', error)
		} finally {
			submitting.value = false
		}
	}

	onMounted(() => {
		console.log('作业评价页面加载完成', {
			classId: classId.value,
			homeworkId: homeworkId.value,
			submissionId: submissionId.value
		})
		// 实际项目中应在此处调用API获取作业和提交信息
	})
</script>

<style scoped>
	.animate-blob {
		animation: blob 7s infinite;
	}

	.animation-delay-2000 {
		animation-delay: 2s;
	}

	.animation-delay-4000 {
		animation-delay: 4s;
	}

	@keyframes blob {
		0% {
			transform: translate(0px, 0px) scale(1);
		}

		33% {
			transform: translate(30px, -50px) scale(1.1);
		}

		66% {
			transform: translate(-20px, 20px) scale(0.9);
		}

		100% {
			transform: translate(0px, 0px) scale(1);
		}
	}
</style>